<template>
	<div class="shouye_touxia">
		<!--小杨哥图标-->
		<ul class="qushi_shang">
			<li class="qushi" v-for="(item,index) in 6">
				<!--鼠标移上去前-->
				<div class="qushi1">
					<div class="shouye_touxia1">
						<img src="../../../assets/img/xiaoyang.png" />
					</div>
					<div class="shouye_touxia2">
						疯狂小杨哥
					</div>
					<div class="shouye_touxia3">
						深码指数：945
					</div>
					<div class="shouye_touxia4">
						NO.1
					</div>
				</div>
				
				<!--鼠标移上去后-->
				<div class="shouye_touyihou">
					<div class="shouye_touyihou1" @click="zudian">
						<img src="../../../assets/img/xiaoyang.png" />
						<span>
							疯狂小杨哥
						</span>
					</div>
					<div class="shouye_touyihou2">
						<div class="shouye_zhishu1">
							<span>NO.1</span>
							<span>
								近六周卡思指数趋势图
							</span>
						</div>
						<div class="shouye_zhishu2">
							<canvas :id="'myChart'+index"></canvas>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { Chart } from '@antv/g2';
	import F2 from "@antv/f2/lib/index-all";
	export default{
		data(){
			return{
				data:[{
				  time: '08',
				  tem: 10
				}, {
				  time: '09',
				  tem: 22
				}, {
				  time: '10',
				  tem: 16
				}, {
				  time: '11',
				  tem: 26
				}, {
				  time: '12',
				  tem: 12
				}, {
				  time: '13',
				  tem: 26
				}, {
				  time: '14',
				  tem: 18
				}, {
				  time: '15',
				  tem: 26
				}, {
				  time: '16',
				  tem: 12
				},{
				  time: '17',
				  tem: 32
				}, {
				  time: '18',
				  tem: 5
				}, {
				  time: '19',
				  tem: 23
				}, {
				  time: '20',
				  tem: 75
				}, {
				  time: '21',
				  tem: 6
				}, {
				  time: '22',
				  tem: 14
				}, {
				  time: '23',
				  tem: 27
				}, {
				  time: '24',
				  tem: 26
				}, {
				  time: '25',
				  tem: 30
				}],
				tuZonggao:'',
				
				flag:false
			}
		},
		mounted:function(){
			var _self=this
			
			_self.tuZonggao=document.body.offsetWidth*0.1;
			// console.log(_self.tuZonggao)
			
			$(window).resize(()=>{
				_self.tuZonggao=document.body.offsetWidth*0.1;
				_self.biaotu()
				_self.biaotu1()
				_self.biaotu2()
				_self.biaotu3()
				_self.biaotu4()
				_self.biaotu5()
			})
			
			$(".qushi").eq(0).hover(function(){_self.biaotu()})
			$(".qushi").eq(1).hover(function(){_self.biaotu1()})
			$(".qushi").eq(2).hover(function(){_self.biaotu2()})
			$(".qushi").eq(3).hover(function(){_self.biaotu3()})
			$(".qushi").eq(4).hover(function(){_self.biaotu4()})
			$(".qushi").eq(5).hover(function(){_self.biaotu5()})
			
			this.biaotu();
			// _self.biaotu1();
			// _self.biaotu2();
			// _self.biaotu3();
			// _self.biaotu4();
			// _self.biaotu5();
			
			//鼠标移上去小杨哥
			$('.qushi_shang li').eq(0).css({"width":"30%"});
			$('.qushi_shang li').eq(0).children('.qushi1').css({"display":"none"});
			$('.qushi_shang li').eq(0).children('.shouye_touyihou').css({"display":"block"});
			//hover效果
			$('.qushi_shang li').hover(function(){
				
				$(this).css({"width":"30%"})
				$(this).siblings().css({"width":"10%"})
				
				$(this).children('.shouye_touyihou').css({"display":"block"});
				$(this).siblings().children('.shouye_touyihou').css({"display":"none"});
				
				$(this).children('.qushi1').css({"display":"none"});
				$(this).siblings().children('.qushi1').css({"display":"block"});
			})
			
		},
		methods:{
			//点击跳转详情页
			zudian(){
				var gui1=this.$store.state.luyoushu;
				// console.log(gui1,"gui1")
				this.$router.push('/home/'+gui1+'/darenxiangqingye')
			},
			
			biaotu(){
				const chart = new F2.Chart({
				  id: 'myChart0',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				  time: {
				    type: 'linear',
				    // tickCount: 10,//定义坐标轴刻度线的条数
				  },
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
			biaotu1(){
				const chart = new F2.Chart({
				  id: 'myChart1',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				time: {
				  type: 'linear',
				  // tickCount: 10,//定义坐标轴刻度线的条数
				},
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
			biaotu2(){
				const chart = new F2.Chart({
				  id: 'myChart2',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				   time: {
				     type: 'linear',
				     // tickCount: 5,//定义坐标轴刻度线的条数
				   },
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
			biaotu3(){
				const chart = new F2.Chart({
				  id: 'myChart3',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				   time: {
					 type: 'linear',
					 // tickCount: 10,//定义坐标轴刻度线的条数
				   },
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
			biaotu4(){
				const chart = new F2.Chart({
				  id: 'myChart4',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				   time: {
				     type: 'linear',
				     // tickCount: 10,//定义坐标轴刻度线的条数
				   },
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
			biaotu5(){
				const chart = new F2.Chart({
				  id: 'myChart5',
				  width:this.tuZonggao*1.4,
				  height: this.tuZonggao,
				  pixelRatio: window.devicePixelRatio
				});
				chart.source(this.data, {
				   time: {
				     type: 'linear',
				     // tickCount: 10,//定义坐标轴刻度线的条数
				   },
				  tem: {
				    tickCount: 5,
				    min: 0
				  }
				});
				
				chart.axis('time', {
				  label: function label(text, index, total) {
				    const textCfg = {};
				    if (index === 0) {
				      textCfg.textAlign = 'left';
				    } else if (index === total - 1) {
				      textCfg.textAlign = 'right';
				    }
				    return textCfg;
				  }
				});
				chart.tooltip({
				  showCrosshairs: true
				});
				
				chart.area()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.line()
				  .position('time*tem')
				  .color('l(90) 0:#1890FF 1:#f7f7f7')
				  .shape('smooth');
				chart.render();
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.shouye_touxia{
		margin-top:30px ;
		
		/*底部换滑上来*/
		@keyframes slide-in-bottom {
		  0% {
		    transform: translateY(1000px);
		    opacity: 0;
		  }
		  100% {
		    transform: translateY(0);
		    opacity: 1;
		  }
		}
		
		 ul{
			 height: 5.7rem;
			 list-style: none;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 
			 li{
				 text-align: center;
				 width: 10%;
				 cursor: pointer;
				 transition: all 0.8s ease;
				 
				 .qushi1{
					 border: 1px solid #D6D6D6;
					 padding: 0.6rem 0.3rem;
					.shouye_touxia1{
						 img{
							 width: 1.6rem;
							 height: 1.6rem;
						 }
					 }
					 .shouye_touxia2{
						 font-size: 0.4rem;
						 color: #000;
						 margin:0.2rem 0 ;
					 }
					.shouye_touxia3{
						color: #1890FF;
						font-size: 0.4rem;
					}
					.shouye_touxia4{
						color: #FF0000;
						font-size: 0.5rem;
						margin-top:0.4rem ;
					}
				 }
				
				.shouye_touyihou{
					border: 1px solid #1890FF;
					display: none;
					padding: 0.52rem 0.4rem;
					padding-bottom:1rem ;
					.shouye_touyihou1{
						width: 30%;
						text-align: center;
						padding: 0.2rem 0;
						float: left;
						img{
							width: 2.8rem;
							height: 2.8rem;
						}
						span{
							display: block;
							color: #000000;
							font-size: 0.5rem;
							margin-top:0.34rem ;
							
							white-space: nowrap;
						}
					}
					.shouye_touyihou2{
						width: 65%;
						float: right;
						position: relative;
						
						.shouye_zhishu1{
							display: flex;
							span:nth-of-type(1){
								flex: 1;
								display: block;
								color: #FF0000;
								font-size: 0.4rem;
								text-align: left;
							}
							span:nth-of-type(2){
								flex: 1;
								display: block;
								color: #666666;
								font-size: 0.3rem;
								text-align: right;
								
								white-space: nowrap;
							}
						}
						.shouye_zhishu2{
							height: 3.9rem;
							margin-top:0.2rem ;
						}
						
						
					}
				}
				.shouye_touyihou::after{
					content: "";
					display: block;
					clear: both;
				}
				
			 }
			 li:nth-of-type(1){
				 animation: slide-in-bottom 0.85s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
			 li:nth-of-type(2){
			 	animation: slide-in-bottom 0.95s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
			 li:nth-of-type(3){
			 	animation: slide-in-bottom 1.05s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
			 li:nth-of-type(4){
			 	animation: slide-in-bottom 1.15s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
			 li:nth-of-type(5){
			 	animation: slide-in-bottom 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
			 li:nth-of-type(6){
			 	animation: slide-in-bottom 1.35s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
			 }
		 }
	}
</style>
